<template>
    <div class="overlay">
        <div class="overlay-title">覆盖厂商</div>
        <div class="overlay-items">
            <div class="overlay-item" v-for="(item, key) in overlayItemList" :key=key>
                <img :src="item.img" alt="">
            </div>
        </div>
    </div>
</template>

<script>

export default {
  name: 'overlay',
  data() {
    return{
        
    }
  },
  props: {
    overlayItemList: {
      type: Array,
      required: true
    }
  },
  components: {
  
  },
  mounted: function () {
    //console.log(this.overlayItemList)
  },
  methods: {
    
  }
}
</script>

<style lang="stylus" scoped>
.overlay{
    height: 748px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    margin-bottom: 20px; 
}
.overlay-title{
    box-sizing: border-box;
    font-size:16px;
    color:rgba(30,30,30,1);
    padding-left: 30px;
    line-height:58px;
    border-bottom: 1px solid rgba(238,238,238,1);
}
.overlay-items{
    padding: 0 30px 60px 30px;
    font-size: 0;
}
.overlay-item{
    display: inline-block;
    width: 132px;
    height: 50px;
    margin-right: 122px;
    margin-top: 40px;
    img{
        width: 100%;
        height: 100%;
    } 
}
.overlay-item:nth-child(4n){
    margin-right: 0;
}
</style>
